<link rel="stylesheet" href="<?php echo $this->webroot;?>css/bootstrap-tagsinput.css"/>
<script type="text/javascript" src="<?php echo $this->webroot;?>js/typeahead.min.js"></script>    
<script type="text/javascript" src="<?php echo $this->webroot;?>js/bootstrap-tagsinput.min.js"></script>    
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <form role="form" name="Bookmaker" method="post" action="<?php echo $this->webroot?>Bookmaker/save?>" >
          <input type="hidden" name="BookmakerLang[ita][id]" value="" />
          <input type="hidden" name="BookmakerLang[eng][id]" value="" />
          <input type="hidden" name="Bookmaker[id]" id="bookmaker_id" value="" />
          <img class="thumbnail" id="thumbnail" src="">
          <div class="form-group  col-md-12">
            <label for="logo">Logo:</label>
            <select id="logo" name="Bookmaker[logo]" style="width:500px;">
                <option value="">Seleziona una immagine</option>
                <?php foreach($files as $file){?>
                <option value="<?php echo LOGO_URL.$file ?>" ><?php echo $file ?></option>
                <?php }?>
            </select>
          </div>
          <div class="form-group  col-md-12">
            <label for="nome">Nome:</label>
            <input type="text" class="form-control" id="nome" name="Bookmaker[nome]" value="" placeholder="Inserisci il nome">
          </div>
          
           <!-- Nav tabs -->
            <ul class="nav nav-tabs">
              <li class="active"><a href="#ita" data-toggle="tab">Ita</a></li>
              <li><a href="#eng" data-toggle="tab">Eng</a></li>
            </ul>
            
            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane fade in active" id="ita">
                 <div class="form-group  col-md-12">
                    <label for="descrizione">Descrizione:</label>
                    <textarea rows="10" class="form-control" id="descrizione" name="BookmakerLang[ita][descrizione]" ></textarea>
                  </div>
              </div>
              <div class="tab-pane fade in" id="eng">
                   <div class="form-group  col-md-12">
                    <label for="descrizione">Descrizione:</label>
                    <textarea rows="10" class="form-control" id="descrizione" name="BookmakerLang[eng][descrizione]" ></textarea>
                  </div>
              </div>
            </div>
          
          
         
          <div class="form-group  col-md-12">
            <label for="link">Link:</label>
            <input type="text" class="form-control" id="link" name="Bookmaker[link]" value="" placeholder="Inserisci il link">
          </div>   
          <div class="form-group col-md-4">
            <label for="puntmin">Puntata Minima:</label>
            <input type="text" class="form-control" id="puntmin" value="" name="Bookmaker[puntata_minima]" placeholder="Inserisci la puntata minima">
          </div>   
          <div class="form-group col-md-4">
            <label for="versmin">Versamento Minimo:</label>
            <input type="text" class="form-control" id="versmin" value="" name="Bookmaker[versamento_minimo]" placeholder="Inserisci il versamento minimo" min="0">
          </div>   
          <div class="form-group col-md-4">
            <label for="verprelminsmin">Prelievi Minimo:</label>
            <input type="text" class="form-control" id="prelmin" value="" name="Bookmaker[prelievi_minimo]" placeholder="Inserisci il prelievo minimo  " min="0">
          </div>   
          <div class="form-group col-md-12">
            <label for="email">Email:</label>
            <input type="text" class="form-control" id="email" value=""  name="Bookmaker[email]" placeholder="Inserisci l'email">
          </div>  
          <div class="form-group  col-md-12">
            <label for="categorie">Categorie:</label>
            <input type="text"   class="form-control tags" id="categorie" value=""  name="Bookmaker[tags]" placeholder="Associa le categorie">
          </div>  
          <div class="form-group  col-md-12">
            <label for="valuta">Valuta:</label>
            <input type="text"  class="form-control tags" id="valuta" value=""  name="Bookmaker[valuta]" placeholder="Associa la valuta">
          </div>  
          <div class="col-md-12 ">
              <button type="submit" class="btn btn-primary">Salva</button>
              <a  href="<?php $this->webroot?>/Bookmaker/index" class="btn">Annulla</a>
          </div>
        </form>
   </div>
  </div>
  <script>
      
  
    
    function format(data) {
        console.log(data);
        return "<img class='banner_thumb' src='<?php echo $this->webroot?>" + data.id + "'/>" + data.text;
    }
    
    $(document).ready(
        function() { 
            
            
             $('#categorie').tagsinput({
              typeahead: {
                local: ['Calcio', 'Tennis'],
                freeInput: false
              }
             });
            
            $('#valuta').tagsinput({
              typeahead: {
                local: ['EUR', 'USD'],
                freeInput: false
              }
            });
            
            $("#logo").on("change",function(){
                $("#thumbnail").attr("src","<?php echo $this->webroot?>"+$(this).val());
                
            });
            
            $("#logo").select2({
                 formatResult: format,
                 escapeMarkup: function(m) { return m; }
            }); 
            
        });
      
  </script>